<%@ page contentType="text/html; charset=UTF-8" buffer="16kb"%>
<%@ include file="../include/taglib.jsp"%>
<%
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
    Long resid = Long.parseLong(request.getParameter("id"));
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>linux综合性能页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="Keywords" content=" " />
<meta name="Description" content=" " />
<%@ include file="../include/common.jsp"%>

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.jqueryplugin.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/Xslider.js"></script>


<script type="text/javascript">

	//线程池
	var  cpuChart;
	function initNet(){
		if(typeof cpuChart == undefined || cpuChart == null){
			 cpuChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","cpuChart1", "100%", "100%", "0", "1" );
		 }
	
		$.ajax({
			url : 'real-time!childResListForGrand.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1203040100000',
				grandchildType:'1203040600000'
			},
			success : function(data) { //
				$('#videolistwraper > .videolist ul ').remove('li');
				$.each(data.res,function(i,index){
					$('#videolistwraper > .videolist ul ').append('	<li><span id='+index.id+' class="listspan">'+index.name+'</span> </li>');
				});		
				//最多显示三个   一次移动两个   不可循环   垂直滚动
				$("#videolistwraper").Xslider({
					unitdisplayed : 4,
					numtoMove : 2,
					loop : "cycle",
					dir : "V"
				});
				//给每一列加点击操作
				$('#videolistwraper .videolist ul li').click(function(){
					$(this).addClass('liselected').siblings().removeClass('liselected');
					$.ajax({
						url : 'real-time!get2LineChart.action', // 
						type : 'POST',
						dataType : "json",
						data : {
							resId :$(this).children('span').attr('id'),
							propIds:'120304060000003,120304060000005'
						},
						success : function(dataset) {
							cpuChart.setJSONData(dataset);
							cpuChart.render("cpuChartDiv");
						}
					});
				});
				//触发第一个
				$('#videolistwraper .videolist ul li :first').click();
			}
		});
	}
	
	
	//servlet
	var  servletChart;
	function initServlet(){
		if(typeof servletChart == undefined || servletChart == null){
			servletChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","servletChart11", "100%", "100%", "0", "1" );
		 }
	
		$.ajax({
			url : 'real-time!childResListForGrand.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1203040100000',
				grandchildType:'1203041100000'
			},
			success : function(data) { //
				$('#servletlistwraper > .videolist ul ').remove('li');
				$.each(data.res,function(i,index){
					$('#servletlistwraper > .videolist ul ').append('	<li><span id='+index.id+' class="listspan">'+index.name+'</span> </li>');
				});		
				//最多显示三个   一次移动两个   不可循环   垂直滚动
				$("#servletlistwraper").Xslider({
					unitdisplayed : 4,
					numtoMove : 2,
					loop : "cycle",
					dir : "V"
				});
				//给每一列加点击操作
				$('#servletlistwraper .videolist ul li').click(function(){
					$(this).addClass('liselected').siblings().removeClass('liselected');
					$.ajax({
						url : 'real-time!get2LineChart.action', // 
						type : 'POST',
						dataType : "json",
						data : {
							resId :$(this).children('span').attr('id'),
							propIds:'120304110000005,120304110000002'
						},
						success : function(dataset) {
							servletChart.setJSONData(dataset);
							servletChart.render("servletDiv");
						}
					});
				});
				//触发第一个
				$('#servletlistwraper .videolist ul li :first').click();
			}
		});
	}

	
	var fsColChartc;
	var managerChart;
	var jdbcvConn;
	var jdbcivConn;
	function initBaseInfo(){
			//基本信息
			$.ajax({
				url : 'real-time!getBaseInfo.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propIds:'attr_110304000000001'
				},
				success : function(data) {
					$('#attr_110304000000001').text(data.attr_110304000000001); //OS版本
					$('#resIp').text(data.ip);
				}
			});
			
			
			//基本信息
			$.ajax({
				url : 'real-time!getBaseInfo.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					childType:'1203040100000',
					propIds:'attr_120304010000001,prop_120304010000009,prop_120304010000001,prop_120304010000006,prop_120304010000007,prop_120304010000008,prop_120304010000005'
				},
				success : function(data) {
					$('#attr_120304010000001').text(data.attr_120304010000001); 
					$('#prop_120304010000009').text(data.prop_120304010000009); 
					$('#prop_120304010000001').text(data.prop_120304010000001); 
					$('#prop_120304010000006').text(data.prop_120304010000006); 
					$('#prop_120304010000007').text(data.prop_120304010000007); 
					$('#prop_120304010000008').text(data.prop_120304010000008); 
					$('#prop_120304010000005').text(data.prop_120304010000005); 
				}
			});
			
			//servers
			if(typeof fsColChartc == undefined || fsColChartc == null){
				fsColChartc =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf?ChartNoDataText=没有数据","fsColChart11", "100%", "130", "0", "1" );
			}
			$.ajax({
				url : 'real-time!get2ColumnChartForGrand.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					detail:1,
					childType:'1203040100000',
					grandchildType:'1203040300000',
					propIds:'120304030000012',
					top:'5'
				},
				success : function(data) {
					fsColChartc.setJSONData(data);
					fsColChartc.render("serversDiv");
				}
			});
			
			//工作管理器
			if(typeof managerChart == undefined || managerChart == null){
				managerChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf?ChartNoDataText=没有数据","managerChart11", "100%", "130", "0", "1" );
			}
			$.ajax({
				url : 'real-time!get2ColumnChartForGrand.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					detail:1,
					childType:'1203040100000',
					grandchildType:'1203040700000',
					propIds:'120304070000003',
					top:'5'
				},
				success : function(data) {
					managerChart.setJSONData(data);
					managerChart.render("managerDiv");
				}
			});
			
			//JDBC活动连接数
			if(typeof jdbcvConn == undefined || jdbcvConn == null){
				jdbcvConn =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf?ChartNoDataText=没有数据","jdbcvConn11", "100%", "130", "0", "1" );
			}
			$.ajax({
				url : 'real-time!get2ColumnChartForGrand.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					detail:1,
					childType:'1203040100000',
					grandchildType:'1203040500000',
					propIds:'120304050000001',
					top:'5'
				},
				success : function(data) {
					jdbcvConn.setJSONData(data);
					jdbcvConn.render("jdbcvDiv");
				}
			});
			
			//JDBC空闲连接数
			if(typeof jdbcivConn == undefined || jdbcivConn == null){
				jdbcivConn =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf?ChartNoDataText=没有数据","jdbcivConn11", "100%", "130", "0", "1" );
			}
			$.ajax({
				url : 'real-time!get2ColumnChartForGrand.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					detail:1,
					childType:'1203040100000',
					grandchildType:'1203040500000',
					propIds:'120304050000017',
					top:'5'
				},
				success : function(data) {
					jdbcivConn.setJSONData(data);
					jdbcivConn.render("jdbcivDiv");
				}
			});
			
	}
	
	
	$(document).ready(function() {
			initBaseInfo();
			initNet();
			initServlet();
		//CPU 内存 每10S刷新一次
		setInterval('initBaseInfo()',60000);
		
	});
</script>

</head>
<body>

	<div class="column">
		<div class="col-main">
			<!--基本信息-->
			<div class="col-l-extra h-400">
			<h2 class="title-h2 m-0">基本信息</h2>
			<ul class="col-l-ul">
					<li><span class="col-l-ul-l" >中间件类别:</span><span 
								class="col-l-ul-r"><img src="${pageContext.request.contextPath}/style/default/bsm/perf/images/weblogic24_24.png">Weblogic</span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">IP:</span><span id="resIp"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">端口:</span><span id="attr_110304000000001"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">域名:</span><span id="attr_120304010000001"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">是否可连接:</span><span id="prop_120304010000009"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">启用管理端口:</span><span id="prop_120304010000001"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">启用生产模式:</span><span id="prop_120304010000006"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">启用集群约束:</span><span id="prop_120304010000007"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">启动时间:</span><span id="prop_120304010000008"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">管理端口:</span><span id="prop_120304010000005"
						class="col-l-ul-r"></span>
					</li>
			</ul>
			</div>
			<div class="col-r-main">
				<div class="col-v-rate-extra" >
				<h2 class="title-h2 m-0">Servers堆空闲百分比 TOP5</h2>
					<div id="serversDiv"></div>
				</div>
				<!--@end基本信息-->
				<div class="col-v-rate-extra f-r">
				<h2 class="title-h2 m-0">JDBC数据源当前活动连接数 TOP5</h2>
				   <div id="jdbcvDiv"></div>
			    </div>
			    
			     <div class="col-v-rate-extra">
		            <h2 class="title-h2 m-0">工作管理器每分钟回滚率 TOP5</h2>
			       <div id="managerDiv"></div>
			    </div>
			    
				<div class="col-v-rate-extra f-r">
				<h2 class="title-h2 m-0">JDBC数据源当前空闲连接数 TOP5</h2>
				   <div id="jdbcivDiv"></div>
			    </div>
		 </div>   
	  </div>
	</div>

	<div class="column b-1">
						<h2 class="title-h2 m-0">线程池子资源 [当天趋势图]-[在用线程数量,队列长度]</h2>
							<div class="col-l-extra"  style="width:20%">
							<ul class="col-l-ul">
								<div id="videolistwraper">
								 <a class="abtn aright" href="#down"></a>
									<div class="videolist">
										<ul>
										</ul>
									</div>
									<a class="abtn aleft" href="#up" ></a>
								</div>
							</ul>
						</div>
					    <div class="col-net-main p-75">
						    <div id="cpuChartDiv"></div>
					    </div>
	</div>
	
	<div class="column b-1">
						<h2 class="title-h2 m-0">Servlet子资源 [当天趋势图]-[调用总数,单个调用最长时间量]</h2>
							<div class="col-l-extra"  style="width:20%">
							<ul class="col-l-ul">
								<div id="servletlistwraper">
								 <a class="abtn aright" href="#down"></a>
									<div class="videolist">
										<ul>
										</ul>
									</div>
									<a class="abtn aleft" href="#up" ></a>
								</div>
							</ul>
						</div>
					    <div class="col-net-main p-75">
						    <div id="servletDiv"></div>
					    </div>
	</div>
	
    <div class="column " style="width:100%;height:5px;"></div>
</body>